<template>
  <div class="total-box">
    <!-- 左侧树结构 -->
    <!-- <div class="head-container">
      <el-input v-model="filterText" placeholder="请输入关键字" />
      <el-tree
        ref="tree"
        style="height: calc(100% - 40px); overflow: auto"
        :data="deptOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        highlight-current
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      />
    </div> -->

    <!-- 右侧 -->
    <div class="app-container">
      <el-row :gutter="20" style="height: 100%">
        <!--用户数据-->
        <el-col :span="24" :xs="24">
          <HkSearchform
            :data="queryParams"
            :field-list="filterInfo.fieldList"
            :list-type-info="dictList"
            @handleSearch="handleQuery"
            @handleReset="resetQuery"
            @handleEvent="handleEvent"
          />

          <el-row :gutter="10">
            <el-button type="primary" size="mini" @click="handleManualJudge">手动同步数据</el-button>
            <!-- <el-button size="mini" @click="handleAutoJudge">自动同步数据</el-button> -->
            <el-button size="mini" @click="handleCompare">对比系统配置</el-button>
          </el-row>

          <hk-table
            ref="tableRef"
            :loading="loading"
            :table-data="tableData"
            :table-columns="tableList"
            :selection="true"
            :show-index="true"
            :total="total"
            :operate="true"
            :table-height="80"
            :query-params="queryParams"
            :common-fixed="true"
            :operate-width="100"
            @handleSelectionChange="handleSelectionChange"
            @changePage="getList"
          >
            <template #operate="scope">
              <el-button :disabled="scope.row.determineStatus==1" type="text" @click="handleJudge(scope.row)">判定 </el-button>
            </template>
            <template #ipStatus="scope">
              <Status
                :is-success="JSON.parse(scope.row.ipStatus ==true ? 1 : 0)"
                :text="scope.row.ipStatus == false ? '不一致' : '一致'"
              />
            </template>
            <template #userStatus="scope">
              <Status
                :is-success="JSON.parse(scope.row.userStatus ==true ? 1 : 0)"
                :text="scope.row.userStatus == false ? '不一致' : '一致'"
              />
            </template>
            <!-- 责任部门 -->
            <template #deptStatus="scope">
              <Status
                :is-success="JSON.parse(scope.row.deptStatus==true ? 1 : 0)"
                :text="scope.row.deptStatus == false ? '不一致' : '一致'"
              />
            </template>
            <!-- 密级 -->
            <template #secLevelStatus="scope">
              <Status
                :is-success="JSON.parse(scope.row.secLevelStatus==true ? 1 : 0)"
                :text="scope.row.secLevelStatus == false ? '不一致' : '一致'"
              />
            </template>
            <!-- 使用状态 -->
            <!-- <template #userStatus="scope">
              <Status
                :is-success="JSON.parse(scope.row.userStatus ? scope.row.userStatus : 0)"
                :text="scope.row.userStatus == false ? '不一致' : '一致'"
              />
            </template> -->
            <!-- 判定状态 -->
            <template #determineStatus="scope">
              <Status
                :is-success="scope.row.determineStatus"
                :text="scope.row.determineStatus == 0 ? '未判定' : '已判定'"
              />
            </template>
          </hk-table>
        </el-col>
      </el-row>
    </div>
    <!--  手动触发判定 -->
    <manual-judge ref="manualJudgeRef" @handleCancel="getList" />
    <!--  自动判定 -->
    <auto-judge ref="autoJudgeRef" />
    <!--  对比系统配置 -->
    <compare-config ref="compareConfigRef" @handleCancel="getList" />
    <!-- 判定 -->
    <judge-dialog ref="judgeDialogRef" @handleSubmit="getList" />
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import HkTable from '@/components/Hk-Table/index.vue'
import HkSearchform from '@/components/HkSearchform/index.vue'
import ManualJudge from './components/manualJudgeDialog.vue'
import AutoJudge from './components/autoJudgeDialog.vue'
import { assetsComList } from '@/api/assets/assetsComparison.js'
import Status from '@/components/Common/status.vue'
import CompareConfig from './components/compareConfigDialog.vue'
import JudgeDialog from './components/judgeDialog.vue'
import { entityTree } from '@/api/assets/org'

const baseUrl = window.baseUrl.asset
export default {
  components: {
    Treeselect,
    HkTable,
    HkSearchform,
    ManualJudge,
    AutoJudge,
    Status,
    CompareConfig,
    JudgeDialog
  },
  data() {
    return {
      filterText: '',
      treeId: '',
      // 搜索项配置
      filterInfo: {
        fieldList: [
          { label: '关键字', type: 'input', field: 'keyword' },
          {
            label: '属性信息',
            type: 'select',
            field: 'attributeName',
            list: 'attributeNameList'
          },
          {
            label: '是否一致',
            type: 'select',
            field: 'attributeValue',
            list: 'attributeList'
          }
        ]
      },
      importUrl: baseUrl + '/assetsOrg/import',
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [{}],
      //  表格
      tableList: [
        { label: '设备唯一标识', param: 'mac' },
        { label: 'IP地址', param: 'ipStatus', type: 'slot' },
        { label: '责任人', param: 'userStatus', type: 'slot' },
        { label: '责任部门', param: 'deptStatus', type: 'slot' },
        {
          label: '密级',
          param: 'secLevelStatus',
          type: 'slot'
        },
        // {
        //   label: '使用状态',
        //   param: 'userStatus',
        //   type: 'slot'
        // },
        { label: '判定状态', param: 'determineStatus', type: 'slot' }
      ],
      // 部门树选项
      deptOptions: undefined,
      // 树结构参数
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      // 查询参数
      queryParams: {
        size: 10,
        current: 1
      },
      // 列表规则
      dictList: {
        attributeNameList: [
          { label: 'IP地址', value: 'ipAgr' },
          { label: '责任人', value: 'userAgr' },
          { label: '密级', value: 'secrecyLevel' },
          { label: '责任部门', value: 'ogrAgr' }
        ],
        attributeList: [
          {
            label: '是',
            value: '1'
          },
          {
            label: '否',
            value: '0'
          }
        ],
        // 部门类型
        orgTypeList: [],
        unitCategoryList: [],
        secQualificatList: [],
        zoneList: [],
        orgList: []
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.getTreeselect()
  },
  methods: {
    /** 查询用户列表 */
    getList(val) {
      this.loading = true
      this.queryParams = { ...this.queryParams, ...val, scrollToTop: true }
      assetsComList(Object.assign({}, this.queryParams, { attributeValue: Number(this.queryParams.attributeValue) })).then((res) => {
        this.total = res.total
        this.tableData = res.list
        console.log(252, this.tableData)
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect(id) {
      entityTree(id).then((res) => {
        this.deptOptions = res
      })
    },

    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.treeId = data.id
      this.getList({ id: data.id })
    },

    /** 搜索按钮操作 */
    handleQuery(val) {
      this.queryParams.current = 1
      this.getList()
    },
    // 重置表单
    resetQuery() {
      for (const key in this.queryParams) {
        this.queryParams[key] = undefined
      }
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.getList()
    },
    // 搜索框变化
    handleEvent(val) {
      const field = val.field
      const value = val.value
      this.queryParams = {
        ...this.queryParams,
        ...{
          [field]: value
        }
      }
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 手动同步数据 */
    handleManualJudge() {
      this.$refs.manualJudgeRef.open = true
    },
    /** 自动同步数据 */
    handleAutoJudge() {
      this.$refs.autoJudgeRef.open = true
    },
    /* 对比系统配置 */
    handleCompare() {
      this.$refs.compareConfigRef.open = true
    },
    /** 判定按钮操作 */
    handleJudge(row) {
      this.$refs.judgeDialogRef.show(row.id)
    },
    /** 树节点筛选 */
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree {
  height: calc(100% - 20px);
}
.total-box {
  font-size: 14px;
  display: flex;
  width: 100%;
  height: 100%;
}
.head-container {
  padding: 20px;
  height: 100%;
  width: 270px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.app-container {
  flex: 1;
  width: calc(100% - 270px);
}
.el-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  &::v-deep .targetTable {
    flex: 1;
    overflow: auto;
  }
}
::v-deep .el-row {
  display: flex;
  flex-wrap: wrap;
}
</style>
